<template>
  <div>
    <el-dialog
      title="编辑隔离人"
      :visible.sync="dialogVisible"
      width="740px"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <el-form
        :model="editForm"
        :rules="rules"
        ref="refForm"
        label-width="90px"
        class="form"
      >
        <div class="title1">隔离点</div>
        <el-form-item size="small" label="安装点">
          <el-input
            v-model="editForm.spaceName"
            disabled
            style="width: 250px"
          ></el-input>
        </el-form-item>
        <el-form-item size="small" label="因素" prop="type">
          <el-select
            v-model="editForm.type"
            placeholder="请选择隔离因素"
            style="width: 250px"
          >
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item size="small" label="类型" prop="isolationType">
          <el-select
            v-model="editForm.isolationType"
            placeholder="请选择隔离类型"
            style="width: 250px"
          >
            <el-option
              v-for="item in isolationTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item size="small" label="省市区" prop="region">
          <el-cascader
            v-model="editForm.region"
            placeholder="请选择来源地区"
            :options="provinceCityAreaData"
            :props="{ expandTrigger: 'hover' }"
            filterable
            @change="changeProvinceCityArea"
            style="width: 250px"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item size="small" label="隔离开始" prop="startTime">
          <el-date-picker
            v-model="editForm.startTime"
            type="datetime"
            style="width: 250px"
            placeholder="选择隔离开始时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item size="small" label="隔离天数" prop="days">
          <el-select
            v-model="editForm.days"
            filterable
            placeholder="请选择隔离天数"
            style="width: 250px"
          >
            <el-option
              v-for="item in dayList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <div class="title1">隔离人员信息</div>
        <el-form-item size="small" label="姓名" prop="name">
          <el-input
            clearable
            v-model="editForm.name"
            placeholder="隔离人姓名"
            style="width: 250px"
            maxlength="20"
          ></el-input>
        </el-form-item>
        <el-form-item size="small" label="手机" prop="mobile">
          <el-input
            oninput="value=value.replace(/[^\d]/g,'')"
            @blur="editForm.mobile = $event.target.value"
            clearable
            v-model="editForm.mobile"
            placeholder="隔离人手机"
            style="width: 250px"
            maxlength="11"
          ></el-input>
        </el-form-item>
        <el-form-item size="small" label="性别" prop="gender">
          <el-select
            v-model="editForm.gender"
            placeholder="请选择隔离人性别"
            style="width: 250px"
          >
            <el-option
              v-for="item in genderList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item size="small" label="身份证" prop="idCard">
          <el-input
            clearable
            v-model="editForm.idCard"
            placeholder="隔离人身份证号"
            style="width: 250px"
            maxlength="18"
            oninput="value=value.replace(/[\W]/g,'')"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog" class="cancel-button">取 消</el-button>
        <el-button size="small" @click="submit" class="confirm-button">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  reqParkList,
  reqSpaceManager,
  reqIsolationPersonEdit,
} from "@/api/api";
import { provinceCityAreaArray } from "@utils/province-city-area";
import rulesMixin from "../mixins/rules.js";
import { mapState } from "vuex";
let arr = [];
for (let i = 1; i <= 30; i++) {
  arr.push({ value: i, label: i });
}
export default {
  props: {
    editData: {
      type: Object,
      default: () => {},
    },
  },
  mixins: [rulesMixin],
  data() {
    return {
      dialogVisible: false,
      typeList: [
        {
          value: "1",
          label: "密接",
        },
        {
          value: "2",
          label: "次密接",
        },
        {
          value: "3",
          label: "确诊",
        },
      ], //因素
      isolationTypeList: [
        {
          value: "1",
          label: "居家隔离",
        },
        {
          value: "2",
          label: "酒店隔离",
        },
        {
          value: "3",
          label: "定点医院隔离",
        },
        {
          value: "4",
          label: "其他隔离",
        },
      ],
      provinceCityAreaData: provinceCityAreaArray,
      dayList: arr,
      genderList: [
        {
          value: "0",
          label: "女",
        },
        {
          value: "1",
          label: "男",
        },
      ],
      editForm: {
        id: "",
        spaceId: "",
        type: "", //因素
        isolationStatus: "",
        isolationType: "", //类型
        region: "",
        fromCityName: "",
        startTime: "",
        days: "",
        name: "",
        mobile: "",
        gender: "",
        idCard: "",
      },
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  watch: {
    editData(val) {
      this.editForm.id = val.id;
      this.editForm.spaceId = val.spaceId;
      this.editForm.spaceName = val.spaceName;
      this.editForm.type = val.type + "";
      this.editForm.isolationType = val.isolationType + "";
      this.editForm.region = [val.fromCityName];
      this.editForm.fromCityName = val.fromCityName;
      this.editForm.startTime = val.startTime;
      this.editForm.days = val.days;
      this.editForm.name = val.name;
      this.editForm.mobile = val.mobile;
      this.editForm.gender = val.gender + "";
      this.editForm.idCard = val.idCard;
    },
  },
  mounted() {},
  methods: {
    // 省市区获取
    changeProvinceCityArea(val) {
      this.editForm.fromCityName = `${val[0]}${val[1]}${val[2]}`;
      this.editForm.region = [val[0], val[1], val[2]];
    },
    // 确定
    submit() {
      this.$refs.refForm.validate(async (valid) => {
        if (!valid) return ;
        let params = {
          id: this.editForm.id,
          spaceId: this.editForm.spaceId,
          type: this.editForm.type,
          isolationStatus: "2",
          isolationType: this.editForm.isolationType,
          fromCityName: this.editForm.fromCityName,
          startTime: this.editForm.startTime,
          days: this.editForm.days,
          name: this.editForm.name,
          mobile: this.editForm.mobile,
          gender: this.editForm.gender,
          idCard: this.editForm.idCard,
        };
        this.reqFun(params);
      });
    },
    // 接口请求编辑隔离人
    async reqFun(params) {
      const res = await reqIsolationPersonEdit(params);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("编辑成功");
      this.closeDialog();
      this.$parent.getDataList();
    },
    // 点击关闭弹框
    closeDialog() {
      this.$refs.refForm.resetFields();
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../common.less");
.form {
  display: flex;
  flex-wrap: wrap;
}

::v-deep .is-disabled {
  .el-input__inner {
    color: #999 !important;
    background-color: rgb(136, 136, 136);
    border: 1px solid rgb(136, 136, 136);
  }
}
.title1 {
  width: 100%;
  color: @primaryThemeTxtColor;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 12px;
  margin-left: 10px;
  &::before {
    content: "";
    border-left: 4px solid #7367f0;
    margin-right: 8px;
  }
  .el-icon-circle-plus-outline {
    margin-left: 5px;
    cursor: pointer;
    &:hover {
      opacity: 0.7;
    }
  }
}
</style>